<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in goodList" :key="item.id" @click="goDetails(item.id)">
            <img src="http://8867345.s21i-8.faiusr.com/2/ABUIABACGAAgyr6AxAUo2IHXtQMwgAU4wAI!640x640.jpg" alt="">
            <h3>{{ item.title}}</h3>
            <div class="info">
                <div class="price">
                    <span class="now">&yen; {{ item.sell_price}}</span>
                    <span class="old">&yen;{{ item.market_price}}</span>
                </div>
                <div class="sell">
                    <span>热卖中</span> 
                    <span>剩{{ item.stock_quantity }}件</span>   
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="goodsListMore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from "mint-ui"
export default {
    data(){
        return {
          goodList: [],
          pageindex : 1
        }
    },
    created(){
        this.getgoodList();
        console.log("api/getgoods?pageindex="+this.pageindex)
    },
    methods:{
        getgoodList(){
            this.$http.get("api/getgoods?pageindex="+this.pageindex).then( result =>{
                if( result.body.status === 0 ){
                    this.goodList = this.goodList.concat(result.body.message)
                    // console.log(result.body.message)
                }else {
                    Toast("加载失败")
                }
            })
        },
        goodsListMore(){
            this.pageindex++;
            this.getgoodList()
        },
        goDetails(id){
            this.$router.push({ name:"goodsinfo",params: { id } })
        }
    }
}
</script>
<style lang="scss" scoped>
.goods-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8px;
    .goods-item {
        width: 49%;
        box-shadow: 0 0 8px #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 2px; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // overflow: hidden;
        img {
        //   text-align: center; 
        width: 100%;
        }
        h3 {
            font-size: 15px;
            font-family: "microsoft yahei";
        }
        .info {
            background: #efefef;
            padding: 10px 0px;
            .price {
                .now {
                    font-size:14px;
                    color: red;
                    font-weight: 700;
                    padding: 0px 5px;
                }
                .old {
                    font-size: 12px;
                    text-decoration: line-through;
                }
            }
            .sell {
                font-size: 12px;
                padding: 5px 5px;
                display: flex;
                justify-content: space-between;
                color: #666;
            }

        }
    }
    button {
        margin-bottom:20px;
    }
}
</style>


